HTML 元素代表一個 HTML 文檔中的導航部分,通常用來包含網站的主要導航連結。這些連結可以用於導航到網站的不同頁面,例如首頁、關於我們、聯繫方式等等。 元素通常放置在頁面的頁眉(header)或頁腳(footer)中,或者可以在網站的側邊欄中使用。
一個簡單的範例:
📌 <body>
<nav>
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/about">通知</a></li>
<li><a href="/services">登入</a></li>
<li><a href="/contact">註冊</a></li>
</ul>
</nav>
</body>
我們可以加上一點點的魔法
像是:
📌nav
{
height: 70px;
width:80vw;
margin-left: 10vw;
background: white;
position: sticky;
top:0;
font-weight:bold;
font-size:200%;
display:flex;
align-items: center;
border-left:1px solid rgb(202, 201, 201);
border-right:1px solid rgb(202, 201, 201);
border-bottom:1px solid rgb(202, 201, 201);
border-radius:0 0 0.5em 0.5em;
}
猜對了嗎?
就是CSS
設置大小
📌height: 70px;
width:80vw;
margin-left: 10vw;
讓他固定在網頁中
📌position: sticky;
top:0;
垂直置中
📌display:flex;
align-items: center;
圓角
📌border-left:1px solid rgb(202, 201, 201);
border-right:1px solid rgb(202, 201, 201);
border-bottom:1px solid rgb(202, 201, 201);
border-radius:0 0 0.5em 0.5em;
這樣以來我們就有了可愛的導航列了
程式碼收錄:https://github.com/chyhhwen/shopping-system